const footballTeam = {
  team: "ABC",
  year: 2000,
  headCoach: "JavaScript",
  players: [
    // 前锋
    {
      name: "Lionel Messi",
      position: "forward",
      isCaptain: true // 队长
    },
    {
      name: "Cristiano Ronaldo",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Kylian Mbappé",
      position: "forward",
      isCaptain: false
    },
    // 中场
    {
      name: "Kevin De Bruyne",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Luka Modrić",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Jude Bellingham",
      position: "midfielder",
      isCaptain: false
    },
    // 后卫
    {
      name: "Virgil van Dijk",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Rúben Dias",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Alessandro Bastoni",
      position: "defender",
      isCaptain: false
    },
    // 门将
    {
      name: "Manuel Neuer",
      position: "goalkeeper",
      isCaptain: false
    },
    // 额外球员（满足至少10名）
    {
      name: "Rodri",
      position: "midfielder",
      isCaptain: false
    }
  ]
};


const team = document.getElementById("team");
const year = document.getElementById("year");
const coach = document.getElementById("head-coach");
const select = document.getElementById("players");
const cards = document.getElementById("player-cards");

team.innerText = footballTeam.team;
year.innerText = footballTeam.year;
coach.innerText = footballTeam.headCoach;

const showCards = playersObjs => {
  cards.innerHTML = "";
  playersObjs.forEach(obj => {
    if (obj.isCaptain) {
      cards.innerHTML += `
       <div class="player-card">
        <h2>(Captain) ${obj.name}</h2>
        <p>Position: ${obj.position}</p>
      </div>
      `
    } else {
      cards.innerHTML += `
       <div class="player-card">
        <h2>${obj.name}</h2>
        <p>Position: ${obj.position}</p>
      </div>
      `
    }
  })
}

const playersSelect = (option) => {
  return option === "all"
  ? footballTeam.players
  : footballTeam.players.filter(
      ({ position }) => position === option
  );
}

showCards(footballTeam.players);
select.addEventListener("change", () => showCards(playersSelect(select.value)));